<template>
  <div class="content">
    <div class="adopt">
      <el-row style="margin-top: 15px" :gutter="20">
        <el-col :span="16">
          <div class="title">
            <div class="info">领养说明</div>
            <div class="line"></div>
          </div>
          <el-carousel height="400px" class="block" style="margin-top: 15px">
            <el-carousel-item>
              <img :src="form.cover" :alt="'图片' + index"  style="object-fit: contain;"/>
            </el-carousel-item>
          </el-carousel>
          <div
            style="
              display: flex;
              justify-content: space-between;
              color: #7f7f7f;
            "
          >
            <div>上次更新：{{ moment(form.time).format('YYYY-MM-DD') }}</div>
            <div>我要举报</div>
          </div>
          <div style="margin-top: 10px">
            <el-row class="row" :gutter="10">
              <el-col class="col-6" :span="6">名字</el-col>
              <el-col class="col-18" :span="18">{{ form.petName }}</el-col>
            </el-row>
            <el-row class="row" :gutter="10">
              <el-col class="col-6" :span="6">品种</el-col>
              <el-col class="col-18" :span="18">{{ form.variety }}</el-col>
            </el-row>
            <el-row class="row" :gutter="10">
              <el-col class="col-6" :span="6">性别</el-col>
              <el-col class="col-18" :span="18">{{ form.sex }}</el-col>
            </el-row>
            <el-row class="row" :gutter="10">
              <el-col class="col-6" :span="6">年龄</el-col>
              <el-col class="col-18" :span="18">{{ form.age }}</el-col>
            </el-row>
            <el-row class="row" :gutter="10">
              <el-col class="col-6" :span="6">健康状况</el-col>
              <el-col class="col-18" :span="18"
                >{{ form.vaccination }} {{ form.sterilization }}
              </el-col>
            </el-row>
            <el-row class="row" :gutter="10">
              <el-col class="col-6" :span="6">地区</el-col>
              <el-col class="col-18" :span="18">{{ form.area }}</el-col>
            </el-row>
          </div>
          <div style="margin-top: 10px">
            <el-button
              style="background-color: #16b78e; color: white; width: 150px"
              @click="dialogFormVisible = true"
              >申请领养</el-button
            >
          </div>
        </el-col>
        <el-col :span="8">
          <div class="title">
            <div class="info">发布者信息</div>
            <div class="line"></div>
          </div>
          <div class="person-content">
            <div class="avatar">
              <img src="@/assets/images/PetCare/normal_u8.svg" alt="" />
            </div>
            <div class="name">桂林电子科技大学流浪动物救助站</div>
            <div class="text">用领养代替购买,让生命不在流浪!</div>
            <div style="display: flex">
              <div class="address">
                <img src="@/assets/images/PetCare/u19.png" alt="" />
              </div>
              <span>广北省离谱市</span>
            </div>
            <div style="display: flex">
              <div class="address">
                <img src="@/assets/images/PetCare/u17.png" alt="" />
              </div>
              <span>通过“宠窝”志愿者认证</span>
            </div>
            <div class="liaotian">
              <el-button
                style="background-color: #16b78e; color: white"
                @click="goToChat"
                >私聊</el-button
              >
            </div>
            <div style="margin-top: 10px; font-size: 15px">
              用户仅通过本站进行信息发布, 信息真实性无法确定
            </div>
          </div>
          <div class="title" style="margin-top: 20px">
            <div class="info">领养说明</div>
            <div class="line"></div>
          </div>
          <div class="shengming">
            “宠窝”平台仅为信息发布的公益平台，不对相关内容的准确性、真实性、正当性、合法性负责，也不承担任何法律责任。
            <div style="margin-top: 20px">
              如有不合规行为请点击举办按钮，最终解释权归“宠窝”平台所有。
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      v-model="state.dialogVisibleChat"
      title="聊天"
      width="1000"
      height="800"
      draggable
      class="is-dialog"
    >
      <Chat :userInfo="userInfo" />
    </el-dialog>
    <el-dialog v-model="dialogFormVisible" title="申请领养" width="500">
      <el-form :model="formRequest">
        <el-form-item label="真实姓名" :label-width="formLabelWidth">
          <el-input v-model="formRequest.realName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="formRequest.sex">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="家庭住址" :label-width="formLabelWidth">
          <el-input v-model="formRequest.address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="formRequest.age" autocomplete="off" />
        </el-form-item>
        <el-form-item label="是否养过或正在宠物" :label-width="formLabelWidth">
          <el-input v-model="formRequest.petRearing" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电话号码" :label-width="formLabelWidth">
          <el-input v-model="formRequest.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="工作情况" :label-width="formLabelWidth">
          <el-input v-model="formRequest.work" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" style="background-color: #16b78e;" @click="confirmRequest"> 申请 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

import { useRoute } from 'vue-router'
import u5 from '@/assets/images/首页/u5.png'
import u6 from '@/assets/images/首页/u6.png'
import u7 from '@/assets/images/首页/u7.png'
import Chat from '@/components/ChatPerson/index.vue'
import axios from 'axios'
import moment from 'moment'
import { reqRequestAdoption } from '@/api/adoption/index.js'

const route = useRoute()
const userInfo = reactive({
  userId: route.query.userId,
  avatar: ''
})
const form = ref({})

const id = route.params.id
const img=form.value.cover
const formData = new FormData()
formData.append('id', id)
let token =
  window.localStorage.getItem('user') || window.sessionStorage.getItem('user')
token = JSON.parse(token)

axios
  .post('http://47.106.183.36:8080/adoption/getDetails', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
      token: token ? token['user'] : ''
    }
  })
  .then((response) => {
    form.value = response.data.data
  })
  .catch((error) => {
    console.error('Error:', error)
  })

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const formRequest = reactive({
  realName: '',
  sex: '',
  address: '',
  age: '',
  petRearing: '',
  phone: '',
  work: '',
  adoptionId:id
})

const confirmRequest = async () => {
  const res = await reqRequestAdoption(formRequest)
  if (res.code == 200) {
    ElMessage({
      message: '申请成功',
      type: 'success'
    })
  }
  dialogFormVisible.value = false
}

const arrImages = [img]

const state = reactive({
  dialogVisibleChat: false
})
const goToChat = () => {
  state.dialogVisibleChat = true
}
</script>

<style scoped>
.content {
  padding: 0 180px;
  margin-top: 100px;
}
.adopt {
  margin-bottom: 50px;
  .text {
    margin-top: 10px;
  }
}
.info {
  padding-top: 5px;
  font-size: 20px;
  width: 140px;
  height: 50px;
  background-color: #09c199;
  text-align: center;
  color: white;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.line {
  border-top: 1px solid #09c199;
  width: 100%;
}
.person-content {
  margin-top: 15px;
  border-radius: 10px;
  border: 1px solid #aaaaaa;
  height: 47%;
  padding: 15px;
  .avatar {
    position: relative;
    width: 120px;
    height: 120px;
    img {
      margin-left: 120px;
      width: 100%;
      height: 100%;
    }
  }
  .name {
    font-size: 15px;
    margin-top: 10px;
  }
  .text {
    margin: 0;
    font-size: 15px;
    color: #aaaaaa;
  }
  .address {
    margin-top: 5px;
    height: 25px;
    width: 25px;
  }
  .liaotian {
    text-align: center;
    margin-top: 10px;
  }
}
img {
  width: 100%;
  height: 100%;
}
.row {
  font-size: 14px;
  .col-6 {
    text-align: center;
    border: 1px solid #e4e4e4;
    padding: 10px;
  }
  .col-18 {
    border: 1px solid #e4e4e4;
    padding: 10px;
    padding-left: 20px !important;
  }
}
.shengming {
  margin-top: 15px;
  border-radius: 10px;
  border: 1px solid #aaaaaa;
  padding: 15px;
}

:deep(.el-dialog) {
  background-color: #f0f2f5;
  border-radius: 10px;
}
</style>
